<template>
	<div class="box">
		<div class="null-page" v-show="yes"></div>
		
		<el-card class="box-card order-list">
			<div slot="header" class="clearfix"><span>我的审核</span></div>

			<el-tabs v-model="checkStatus" @tab-click="handleClick">
				<el-tab-pane label="全部" name="all"></el-tab-pane>
				<el-tab-pane label="待审核" name="0"></el-tab-pane>
				<el-tab-pane label="已通过" name="2"></el-tab-pane>
				<el-tab-pane label="已拒绝" name="1"></el-tab-pane>
				<!-- <el-tab-pane label="待评价" name="waitrate"></el-tab-pane> -->
			</el-tabs>

			<div v-loading="loading">
				<template>
					<el-table
						:data="checkList"
						style="width: 100%">
							<el-table-column
						label="申请人"
						width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{scope.row.username}}</span>
						</template>
						</el-table-column>
						<el-table-column
						label="申请时间"
						width="180">
						<template slot-scope="scope">
							<i class="el-icon-time"></i>
							<span style="margin-left: 10px">{{ $util.timeStampTurnTime(scope.row.apply_time) }}</span>
						</template>
						</el-table-column>
						<el-table-column
						label="我的审核状态"
						width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px" v-if="scope.row.check_status == 0">待审核</span>
							<span style="margin-left: 10px;display:block;" v-if="scope.row.check_status == 1">已拒绝</span>
							<span style="margin-left: 10px" v-if="parseInt(scope.row.check_status) >= 2">已通过</span>
							<span v-if="scope.row.check_status == 1 || scope.row.check_status == 3 || scope.row.check_status == 5 ">
								拒绝理由:
							</span>
							<!-- 代理审核拒绝理由 -->
							<span v-if="scope.row.check_status == 1  ">
								{{scope.row.superior_reject_reason}}
							</span>
							<!-- 后台审核拒绝理由 -->
							<span v-if=" scope.row.check_status == 3 ||scope.row.check_status == 5 ">
								{{scope.row.admin_reject_reason}}
							</span>
						</template>
						</el-table-column>
						<el-table-column
						label="平台审核状态"
						width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.admin_status_name }}</span>
						</template>
						</el-table-column>						
						<el-table-column label="通过或拒绝">
						<template slot-scope="scope" v-if="scope.row.check_status == 0">
							<el-button
							size="mini"
							@click="handlePass(1,scope.row.id,scope.row.member_id)">通过</el-button>
							<el-button
							size="mini"
							type="danger"
							@click="handleRefuse(2,scope.row.id,scope.row.member_id)">拒绝</el-button>
						</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</el-card>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { apiOrderList } from '@/api/order/order';
import { apiAgent_check, getAgentCheck } from '@/api/member/index';
import orderMethod from '@/utils/orderMethod';
export default {
	name: 'check_list',
	components: {},
	data: () => {
		return {
			checkStatus: 'all',
			loading: true,
            checkList: [],
			currentPage: 1,
			pageSize: 10,
			total: 0,
			yes: true,
			//拒绝理由
			reason: '',
		};
	},
	mixins: [orderMethod],
	created() {
		this.checkStatus = this.$route.query.status || 'all';
		this.getAgentCheckList();
	},
	computed: {
		...mapGetters(['defaultGoodsImage'])
	},
	mounted() {
		let self = this;
		setTimeout(function() {
			self.yes = false
		}, 300)
	},
	methods: {
		 handlePass(option,id,member_id) {
			 this.$confirm('确定要通过吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					getAgentCheck({
						id: id,
						member_id: member_id,
						reason: this.reason,
						option: option,
					})
					.then(res=>{
						if(res.code ==0 ){
							this.$message({
								type: 'success',
								message: '通过成功!'
							});
							this.refresh();
						}
					})
					.catch(err=>{
						this.$message({
							type: 'warning',
							message: err
						})
					})
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				});          
			});
      },
      handleRefuse(option,id,member_id) {
		console.log(option,id,member_id)
		
		this.$prompt('请输入拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
			this.reason = value;
			getAgentCheck({
						id: id,
						member_id: member_id,
						reason: this.reason,
						option: option,
					})
					.then(res=>{
						if(res.code ==0 ){
							this.$message({
								type: 'success',
								message: '拒绝成功!'
							});
							this.refresh();
						}
					})
					.catch(err=>{
						this.$message({
							type: 'warning',
							message: err
						})
					})

          this.$message({
            type: 'success',
            message: '你的拒绝理由是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });       
        });

      },
		handleClick(tab, event) {
			this.currentPage = 1;
			this.checkStatus = tab.name;
			this.refresh();
        },
        getAgentCheckList() {
            apiAgent_check({
                page: this.currentPage,
                page_size: this.pageSize,
                status: this.checkStatus
            })
                .then(res => {
                    let list = [];
                    if(res.code == 0) {
                        list = res.data.list;
                        this.total = res.data.count;
                    }
                    this.checkList = list;
                    this.loading = false;
                })
                .catch(res => {
                    this.loading = false;
                });
        },
		handlePageSizeChange(size) {
			this.pageSize = size;
			this.refresh();
		},
		handleCurrentPageChange(page) {
			this.currentPage = page;
			this.refresh();
		},
		refresh() {
			this.loading = true;
			this.getAgentCheckList();
		},
		imageError(orderIndex, goodsIndex) {
			this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.defaultGoodsImage;
		}
	}
};
</script>
<style lang="scss" scoped>
.box {
	width: 100%;
	position: relative;
}

.null-page {
	width: 100%;
	height: 730px;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}

.order-list {
	nav {
		overflow: hidden;
		padding: 10px 0;
		background: #fff;
		margin-bottom: 10px;
		border-bottom: 1px solid #eeeeee;
		li {
			float: left;
			&:nth-child(1) {
				width: 45%;
			}
			&:nth-child(2) {
				width: 10%;
			}
			&:nth-child(3) {
				width: 10%;
			}
			&:nth-child(4) {
				width: 10%;
			}
			&:nth-child(5) {
				width: 15%;
			}
			&:nth-child(6) {
				width: 10%;
			}
		}
	}
	.list {
		.item {
			margin-bottom: 20px;
			border: 1px solid #eeeeee;
			border-top: 0;
			.head {
				padding: 8px 10px;
				background: #f7f7f7;
				font-size: 12px;

				.create-time {
					margin-right: 10px;
				}

				border-bottom: 1px solid #eeeeee;
				a {
					margin: 0 10px 0 20px;
				}

				.order-type {
					margin-left: 30px;
				}
			}
		}
		ul {
			background-color: #fff;
			padding: 10px;
			overflow: hidden;
			li {
				float: left;
				line-height: 60px;
				&:nth-child(1) {
					width: 45%;
					line-height: inherit;
					.img-wrap {
						width: 60px;
						height: 60px;
						float: left;
						margin-right: 10px;
						cursor: pointer;
					}
					.info-wrap {
						margin-left: 70px;
						h5 {
							font-weight: normal;
							font-size: $ns-font-size-base;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin-right: 10px;
							display: inline-block;
							cursor: pointer;
							&:hover {
								color: $base-color;
							}
						}
						span {
							font-size: $ns-font-size-sm;
							color: #9a9a9a;
						}
					}
				}
				&:nth-child(2) {
					width: 10%;
				}
				&:nth-child(3) {
					width: 10%;
				}
				&:nth-child(4) {
					width: 10%;
				}
				&:nth-child(5) {
					width: 15%;
					line-height: 30px;
					a {
						display: block;
					}
				}
				&:nth-child(6) {
					width: 10%;
					line-height: initial;
					button {
						margin-left: 0;
						margin-bottom: 10px;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
	.empty-wrap {
		text-align: center;
		padding: 10px;
	}
}
</style>
